<template>
    <div class="banner-container" :style="{backgroundImage:'url(' + src + ')'}">
        <div class="dev-width">
            <div class="search">
                <Input class="search_input" v-model.trim="keyword" @keyup.enter.native="search" placeholder="热搜词:商标、专利、版权登记、VI设计、公司注册">
                <Select v-model="model" slot="prepend" style="width: 80px">
                    <Option v-for="(item,index) in codes" :value="item.name" :key="index">
                        {{item.name}}
                    </Option>
                </Select>
                <span slot="append" @click="search">
                    <Icon type="ios-search-strong"></Icon>
                    搜索
                </span>
                </Input>
            </div>
            <div class="solgan">
                <div id="solgan">技术转移第四方平台</div>
                <div class="sub">欢迎加入江苏技术产权交易市场</div>
            </div>
        </div>
    </div>
</template>
<script>
import { searchCodes } from "~/constant/SearchCodes"
export default {
    name: "banner",
    props: {
        src: String
    },
    data() {
        return {
            keyword: '',
            codes: searchCodes,
            hotKeyword: ['商标', '专利', '版权登记', 'VI设计', '公司注册'],
            model: '全部'
        }
    },
    computed: {
        selectedGoodType() {
            return this.codes.find(_ => _.name == this.model)
        }
    },
    methods: {
        search() {
            var query = {
                keyword: this.keyword,
                category: this.selectedGoodType.category
            }
            if (query.category == "goods") {
                query.goodsTypes = this.selectedGoodType.code
            }
            this.$router.push({
                path: "/search",
                query: query
            })
        }
    }
}
</script>
<style lang="less" scoped>
.banner-container {
  position: absolute;
  left: 0;
  top: -60px;
  height: 390px;
  width: 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center center;
  //min-width: 1920px;
  min-width: 1240px;
  .search {
    margin: 0 auto;
    width: 669px;
    padding: 125px 0 45px 0;
  }

  .solgan {
    color: white;
    font-size: 50px;
    font-weight: 800;
    letter-spacing: 4px;

    .sub {
      font-size: 22px;
      font-weight: normal;
      letter-spacing: 2px;
    }
  }
}
</style>